<template>
  <div class="zaixianjianli">
    <div class="tips" v-if="resumePercentLength">
      <span class="big"
        >您的简历有
        <b>{{ resumePercentLength }}</b>
        个待优化/完善项</span
      >
      <span>优化/完善后更容易获得招聘者关注，大幅度提升求职成功率</span>
    </div>
    <!-- 基本信息 -->
    <div class="block block-jibenxinxi">
      <div class="basic-info">
        <div class="block-sub__title">
          <span class="line"></span>基本信息
          <div class="action-btn__box">
            <span
              class="edit"
              v-if="!editState.jibenxinxi"
              @click="editState.jibenxinxi = true"
              ><svg-icon name="resume-edit" /> 编辑</span
            >
          </div>
          <div class="youhua-tag" v-if="!resumePercent?.addressFlag">
            有待优化项
          </div>
        </div>

        <a-row class="content" v-if="!editState.jibenxinxi">
          <a-col :span="6" v-for="(item, index) in jibenxinxiData" :key="index">
            <div class="label-title">{{ item.label }}</div>
            <div class="label-content">{{ item.value || '-' }}</div>
          </a-col>
          <a-col :span="24" class="width-24">
            <div class="label-title">常住地址</div>
            <div class="label-content">
              {{ jibenxinxiData_detailedLocation }}
            </div>
          </a-col>
        </a-row>
        <div class="content bg" v-else>
          <JiBenXinXiForm
            :value="jibenxinxiForm"
            @close="editState.jibenxinxi = false"
            @finish="
              (editState.jibenxinxi = false),
                selectSeekerBaseInfo(),
                selectResumePerfection()
            "
          />
        </div>
      </div>
    </div>

    <!-- 求职期望 -->
    <div class="block block-qiuzhiqiwang">
      <!-- 求职者期望 -->
      <div class="qi-wang">
        <div class="block-sub__title">
          <span class="line"></span>求职意向
          <div class="action-btn__box">
            <span
              class="edit"
              v-if="!editState.qiuzhiqiwang"
              @click="editState.qiuzhiqiwang = true"
              ><svg-icon name="resume-edit" /> 编辑</span
            >
          </div>
        </div>
        <div class="content">
          <a-row v-if="!editState.qiuzhiqiwang">
            <a-col
              :span="6"
              v-for="(item, index) in qiuzhiqiwangData"
              :key="index"
            >
              <div class="label-title">{{ item.label }}</div>
              <div class="label-content">{{ item.value || '-' }}</div>
            </a-col>
          </a-row>
          <QiuZhiQiWangForm
            v-else
            :value="qiuzhiqiwangForm"
            @close="editState.qiuzhiqiwang = false"
            @finish="
              (editState.qiuzhiqiwang = false),
                selectSeekerPurpose(),
                selectSeekerBaseInfo(),
                selectResumePerfection()
            "
          />
        </div>
      </div>
    </div>

    <!-- 个人优势 -->
    <div class="block block-gerenyoushi">
      <div class="youshi">
        <div class="block-sub__title">
          <span class="line"></span>个人优势
          <div class="action-btn__box">
            <span
              class="edit"
              v-if="!editState.gerenyoushi"
              @click="editState.gerenyoushi = true"
              ><svg-icon name="resume-edit" /> 编辑</span
            >
          </div>
          <div class="youhua-tag" v-if="!resumePercent?.advantageFlag">
            有待优化项
          </div>
        </div>

        <div
          class="content"
          :class="{
            bg: editState.gerenyoushi,
          }"
        >
          <GeRenYouShiForm
            v-if="editState.gerenyoushi"
            :value="gerenyoushiData"
            @close="editState.gerenyoushi = false"
            @finish="
              (editState.gerenyoushi = false),
                selectSeekerAdvantage(),
                selectResumePerfection()
            "
          />
          <p v-else>{{ gerenyoushiData }}</p>
        </div>
      </div>
    </div>

    <!-- 工作经历 -->
    <div class="block block-gongzuojingli">
      <div class="block-sub__title">
        <span class="line"></span>工作经历
        <div class="action-btn__box">
          <span
            class="edit"
            v-if="
              !editState.tianjia_gognzuojingli &&
              workExperienceBOList.every((t:any) => !t.editing)
            "
            @click="() => (editState.tianjia_gognzuojingli = true)"
            ><svg-icon name="resume-add" /> 添加</span
          >
        </div>
        <div class="youhua-tag" v-if="!resumePercent?.workExperienceFlag">
          有待优化项
        </div>
      </div>
      <div class="content" v-if="editState.tianjia_gognzuojingli">
        <GongZuoJingliForm
          :value="null"
          @close="() => (editState.tianjia_gognzuojingli = false)"
          @finish="
            (editState.tianjia_gognzuojingli = false),
              selectSeekerWorkExperience()
          "
        />
        <div class="line"></div>
      </div>
      <div
        class="content"
        v-for="(item, index) in workExperienceBOList"
        :key="index"
      >
        <template v-if="!item.editing">
          <div class="project-name">
            <div>{{ item?.companyName }}</div>

            <span class="text">{{ getQuJianTime(item) }}</span>
            <div class="action-text">
              <span class="edit h1" @click="() => onEditGongZuoJingYan(item)"
                ><svg-icon name="resume-edit" /> 编辑</span
              >
              <span class="edit h2" @click="() => onDel('gonzuojingli', item)"
                ><svg-icon name="resume-del" /> 删除</span
              >
            </div>
          </div>
          <div class="sub-project-name">
            <div>{{ item?.positionName }}</div>
          </div>

          <div class="huibaoshangji" v-if="item.reportTo">
            汇报上级：<span>{{ item?.reportTo }}</span>
          </div>
          <div class="huibaoshangji" v-if="item.underlingNum">
            带领团队人数：<span>{{ item?.underlingNum }}</span>
          </div>

          <div class="project-des">工作职责：</div>
          <div class="project-text">
            <p v-for="(text, i) in getDes(item, 'description')" :key="i">
              {{ text }}
            </p>
          </div>
        </template>
        <GongZuoJingliForm
          v-else
          :value="item"
          @close="item.editing = false"
          @finish="selectSeekerWorkExperience(), selectResumePerfection()"
        />
        <div class="line" v-if="index !== workExperienceBOList.length - 1" />
      </div>
    </div>

    <!-- 项目经历 -->
    <div class="block block-xiangmujingyan">
      <div class="block-sub__title">
        <span class="line"></span>项目经历
        <div class="action-btn__box">
          <span
            class="edit"
            v-if="!editState.tianjia_xiangmujingyan && projectExperienceBOList.every((t:any) => !t.editing)"
            @click="editState.tianjia_xiangmujingyan = true"
            ><svg-icon name="resume-add" /> 添加</span
          >
        </div>
        <div class="youhua-tag" v-if="!resumePercent?.projectFlag">
          有待优化项
        </div>
      </div>
      <div class="content" v-if="editState.tianjia_xiangmujingyan">
        <XiangMuJingliForm
          :value="null"
          @close="editState.tianjia_xiangmujingyan = false"
          @finish="
            (editState.tianjia_xiangmujingyan = false),
              selectSeekerProjectExperience(),
              selectResumePerfection()
          "
        />
      </div>

      <div
        class="content"
        v-for="(item, index) in projectExperienceBOList"
        :key="index"
      >
        <template v-if="!item.editing">
          <div class="project-name">
            <div>{{ item.projectName }}</div>
            <span class="text">{{ getQuJianTime(item) }}</span>
            <div class="action-text">
              <span class="edit h1" @click="onEditGongZuoJingYan(item)"
                ><svg-icon name="resume-edit" /> 编辑</span
              >
              <span class="edit h2" @click="() => onDel('xiangmujingli', item)"
                ><svg-icon name="resume-del" /> 删除</span
              >
            </div>
          </div>
          <div class="danrenjuese" v-if="item?.jobTitle">
            担任角色：<span>{{ item.jobTitle }}</span>
          </div>
          <div class="project-des">项目内容:</div>
          <div class="project-text">
            <p v-for="(text, i) in getDes(item, 'description')" :key="i">
              {{ text }}
            </p>
          </div>
          <div class="project-des">项目业绩：</div>
          <div class="project-text">
            <p v-for="(text, i) in getDes(item, 'performance')" :key="i">
              {{ text }}
            </p>
          </div>
          <div class="xiangmulianjie" v-if="item?.links">
            <div class="title-link">项目链接：</div>
            <div class="link">
              <a :href="formatLinks(item.links)" target="_blank">{{
                item.links
              }}</a>
            </div>
          </div>
        </template>
        <XiangMuJingliForm
          v-else
          :value="item"
          @close="item.editing = false"
          @finish="selectSeekerProjectExperience(), selectResumePerfection()"
        />
        <div class="line" v-if="index !== projectExperienceBOList.length - 1" />
      </div>
    </div>

    <!-- 教育经历 -->
    <div class="block block-jiaoyujingli">
      <div class="block-sub__title">
        <span class="line"></span>教育经历
        <div class="action-btn__box">
          <span
            class="edit"
            v-if="!editState.tianjia_jiaoyujingli && educationExperienceList.every((t:any) => !t.editing)"
            @click="editState.tianjia_jiaoyujingli = true"
            ><svg-icon name="resume-add" /> 添加</span
          >
        </div>
        <!-- <div class="youhua-tag">有待优化项</div> -->
      </div>
      <div class="content" v-if="editState.tianjia_jiaoyujingli">
        <JiaoYuJingLiForm
          :value="null"
          @close="editState.tianjia_jiaoyujingli = false"
          @finish="
            (editState.tianjia_jiaoyujingli = false),
              selectSeekerEducationExperience(),
              selectResumePerfection()
          "
        />
      </div>
      <div
        class="content"
        v-for="(item, index) in educationExperienceList"
        :key="index"
      >
        <template v-if="!item.editing">
          <div class="project-name">
            <div>
              {{ item.schoolName }}{{ item.major ? ` | ${item.major}` : ''
              }}{{ item.degreeName ? ` | ${item.degreeName}` : '' }}
            </div>
            <span class="text">{{ getQuJianTime(item) }}</span>
            <div class="action-text">
              <span class="edit h1" @click="onEditGongZuoJingYan(item)"
                ><svg-icon name="resume-edit" /> 编辑</span
              >
              <span class="edit h2" @click="() => onDel('jiaoyujingli', item)"
                ><svg-icon name="resume-del" /> 删除</span
              >
            </div>
          </div>
          <div class="project-des">在校经历：</div>
          <div class="project-text">
            <p v-for="(text, i) in getDes(item, 'experience')" :key="i">
              {{ text }}
            </p>
          </div>
        </template>
        <JiaoYuJingLiForm
          v-else
          :value="item"
          @close="item.editing = false"
          @finish="selectSeekerEducationExperience(), selectResumePerfection()"
        />
        <div class="line" v-if="index !== educationExperienceList.length - 1" />
      </div>
    </div>

    <!-- 资格证书 -->
    <div class="block block-zigezhengshu">
      <div class="block-sub__title">
        <span class="line"></span>资格证书
        <div class="action-btn__box">
          <span
            class="edit"
            v-if="!editState.tianjia_zigezhengshu"
            @click="editState.tianjia_zigezhengshu = true"
            ><svg-icon name="resume-add" /> 编辑</span
          >
        </div>
        <div class="youhua-tag" v-if="!resumePercent?.certificateFlag">
          有待优化项
        </div>
      </div>
      <div class="content" v-if="editState.tianjia_zigezhengshu">
        <ZiGeZhengShuForm
          :value="zigezhengshuData"
          :value2="zigezhengshuData2"
          @close="editState.tianjia_zigezhengshu = false"
          @finish="
            (editState.tianjia_zigezhengshu = false),
              selectSeekerCertificate(),
              selectResumePerfection()
          "
        />
      </div>
      <template v-else>
        <div class="content" style="margin-bottom: 20px; padding: 0">
          <a-tag v-for="(item, index) in zigezhengshuData2" :key="index">
            {{ item.professionalName }}
          </a-tag>
        </div>
        <div class="content">
          <a-tag v-for="(item, index) in zigezhengshuData" :key="index">
            {{ item.certName }}
          </a-tag>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, createVNode, computed } from 'vue';
import ResumeService from '@/api/resume';
import JiBenXinXiForm from './JiBenXinXiForm.vue';
import QiuZhiQiWangForm from './QiuZhiQiWangForm.vue';
import GongZuoJingliForm from './GongZuoJingliForm.vue';
import XiangMuJingliForm from './XiangMuJingliForm.vue';
import JiaoYuJingLiForm from './JiaoYuJingLiForm.vue';
import GeRenYouShiForm from './GeRenYouShiForm.vue';
import ZiGeZhengShuForm from './ZiGeZhengShuForm.vue';
import _ from 'lodash';
import { TypeSelectSeekerBaseInfoResp } from '../type';
import { GET_CURRENT_JOB_STATE_DICT_TEXT } from '@/utils/dict';
import UserService from '@/api/user';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { formatNumber } from '@/utils/util';

// 基本信息相关
const jibenxinxiData = ref<any>([]);
const jibenxinxiData_detailedLocation = ref();
const jibenxinxiForm = ref();
const resumePercent = ref<any>({});

// 求职期望相关
const qiuzhiqiwangData = ref<any>([]);
const qiuzhiqiwangForm = ref();

// 个人优势
const gerenyoushiData = ref();

// 工作经验相关
const workExperienceBOList = ref<any>([]);

// 项目经历
const projectExperienceBOList = ref<any>([]);

// 教育经历
const educationExperienceList = ref<any>([]);
const zigezhengshuData = ref<any>([]);
const zigezhengshuData2 = ref<any>([]);
const resumePercentLength = computed(() => {
  return Object.values(resumePercent.value)?.filter(t => t == false).length;
});
const editState = reactive({
  jibenxinxi: false,
  qiuzhiqiwang: false,
  tianjia_gognzuojingli: false,
  tianjia_xiangmujingyan: false,
  tianjia_jiaoyujingli: false,
  tianjia_zigezhengshu: false,
  gerenyoushi: false,
});

function formatLinks(link: string) {
  if (link.startsWith('http')) return link;
  return `//${link}`;
}

function onEditGongZuoJingYan(item: any) {
  item.editing = true;
  const others = workExperienceBOList.value.filter(
    (t: { id: any }) => t.id !== item.id,
  );
  others.forEach((t: { editing: boolean }) => {
    if (t.editing) {
      t.editing = false;
    }
  });
}

function getQuJianTime(item: any) {
  if (!(item.startTime && item.endTime)) {
    return null;
  }
  return `${
    item.startTime ? dayjs(item.startTime)?.format('YYYY.MM.DD') || '' : ''
  }-${item.endTime ? dayjs(item.endTime)?.format('YYYY.MM.DD') || '' : ''}`;
}

function getDes(item: { [x: string]: any }, key = 'description') {
  const description = item[key];
  if (description) {
    const arr = description.split(`\n`);
    return arr;
  }
  return [];
}

function onDel(key: string, item: any) {
  let title: string,
    api: (arg0: any) => Promise<any>,
    params: any = {},
    callback: any;

  if (key === 'gonzuojingli') {
    title = `您确定删除这段工作经历吗?`;
    api = UserService.deleteWorkExperience;
    params = { id: item.id };
    callback = selectSeekerWorkExperience;
    if (workExperienceBOList.value?.length === 1) {
      message.warn(`最后一段工作经历不能删除~`);
      return;
    }
  } else if (key === 'xiangmujingli') {
    title = `您确定删除这段项目经历吗?`;
    api = UserService.deleteProjectExperience;
    params = { id: item.id };
    callback = selectSeekerProjectExperience;
    if (projectExperienceBOList.value?.length === 1) {
      message.warn(`最后一段项目经历不能删除~`);
      return;
    }
  } else if (key === 'jiaoyujingli') {
    title = `您确定删除这段教育经历吗?`;
    api = UserService.deleteEducationExperience;
    params = { id: item.id };
    callback = selectSeekerEducationExperience;
    if (educationExperienceList.value?.length === 1) {
      message.warn(`最后一段教育经历不能删除~`);
      return;
    }
  }
  Modal.confirm({
    title: () => title,
    icon: () => createVNode(ExclamationCircleOutlined),
    async onOk() {
      try {
        const resp = await api(params.id);
        if (resp.code === 200) {
          message.success('操作成功');
          callback?.();
          return Promise.resolve();
        } else {
          message.error(resp?.msg || '操作失败');
          return Promise.reject(resp?.msg || '操作失败');
        }
      } catch (error) {
        return Promise.reject(error);
      }
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() {},
  });
}

// 获取基本信息
async function selectSeekerBaseInfo() {
  try {
    const resp =
      await ResumeService.selectSeekerBaseInfo<TypeSelectSeekerBaseInfoResp>();
    if (resp.code != 200) return;
    const data = resp.data;
    jibenxinxiForm.value = resp.data;
    // 基本信息
    jibenxinxiData.value = [
      {
        label: '真实姓名',
        value: data?.name,
      },
      {
        label: '性别',
        value: data?.genderEnumLabel,
      },
      {
        label: '出生年月',
        value: data?.dateOfBirth
          ? dayjs(data.dateOfBirth).format('YYYY-MM-DD')
          : '-',
      },
      {
        label: '参加工作时间',
        value: data?.workStartYear || null,
      },
      {
        label: '微信号',
        value: data?.wechat,
      },
      {
        label: '邮箱',
        value: data?.email,
      },
      {
        label: '当前省份',
        value: data?.currentAreaName,
      },
      {
        label: '当前城市',
        value: data?.currentStreetName,
      },
      {
        label: '当前薪资',
        value:
          data?.currentSalary && data?.salaryNum
            ? `${formatNumber(_.floor(data.currentSalary, 1))} *${
                data.salaryNum
              }`
            : '-',
      },
    ];
    jibenxinxiData_detailedLocation.value = data?.detailedLocation;
  } catch (error) {
    console.log(error);
  }
}

// 查询求着者求职意向
async function selectSeekerPurpose() {
  try {
    const resp = await ResumeService.selectSeekerPurpose<any>();
    if (resp.code != 200) return;
    const data = resp.data;
    qiuzhiqiwangForm.value = resp.data;
    qiuzhiqiwangData.value = [
      // {
      //   label: '工作城市',
      //   value: data?.desiredAreaName,
      // },
      {
        label: '期望职位',
        value: data?.desiredPositionName,
      },
      {
        label: '期望行业',
        value: data?.desiredIndustryName || '不限',
      },
      {
        label: '薪资要求',
        value:
          data?.desiredSalaryMin && data?.desiredSalaryMax
            ? `${formatNumber(data.desiredSalaryMin / 1000)}-${formatNumber(
                data.desiredSalaryMax / 1000,
              )}/月`
            : '-',
      },
      {
        label: '求职状态',
        value: GET_CURRENT_JOB_STATE_DICT_TEXT(data.currentState) || '-',
      },
    ];
  } catch (error) {
    console.log(error);
  }
}

// 查询个人优势
async function selectSeekerAdvantage() {
  try {
    const resp = await ResumeService.selectSeekerAdvantage();
    if (resp.code !== 200) return;
    gerenyoushiData.value = resp.data.advantage;
  } catch (error) {
    console.log(error);
  }
}

// 工作经历
async function selectSeekerWorkExperience() {
  try {
    const resp = await ResumeService.selectSeekerWorkExperience();
    if (resp.code != 200) return;
    const data = resp?.data || [];
    const _workExperienceBOList = data.map((t: any) => {
      return {
        ...t,
        editing: false,
      };
    });
    workExperienceBOList.value = _workExperienceBOList;
  } catch (error) {
    console.log(error);
  }
}

// 项目经历
async function selectSeekerProjectExperience() {
  try {
    const resp = await ResumeService.selectSeekerProjectExperience();
    if (resp.code === 200) {
      const data = resp.data || [];

      const _projectExperienceBOList = data.map((t: any) => {
        return {
          ...t,
          editing: false,
        };
      });
      projectExperienceBOList.value = _projectExperienceBOList;
    }
  } catch (error) {
    console.log(error);
  }
}

// 教育经历
async function selectSeekerEducationExperience() {
  try {
    const resp = await ResumeService.selectSeekerEducationExperience();
    if (resp.code === 200) {
      const data = resp?.data || [];
      // 教育经历
      const _educationExperienceList = data.map((t: any) => {
        return {
          ...t,
          editing: false,
        };
      });
      educationExperienceList.value = _educationExperienceList;
    }
  } catch (error) {
    console.log(error);
  }
}

// 资格证书
async function selectSeekerCertificate() {
  try {
    const resp = await ResumeService.selectSeekerCertificate();
    if (resp.code === 200) {
      const data = resp.data || [];
      zigezhengshuData.value = data.filter((t: any) => t.certName);
    }
    const resp2 = await ResumeService.selectSeekerProfessional();
    if (resp2.code === 200) {
      // const data = resp2.data || [];
      zigezhengshuData2.value = resp2.data;
    }
  } catch (error) {
    console.log(error);
  }
}

// 个人简历的完善程度
async function selectResumePerfection() {
  try {
    const resp = await ResumeService.selectResumePerfection();
    if (resp.code === 200) {
      const data = resp.data;
      delete data.fileResumeFlag;
      resumePercent.value = data;
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  selectSeekerBaseInfo();
  selectSeekerPurpose();
  selectSeekerAdvantage();
  selectSeekerWorkExperience();
  selectSeekerProjectExperience();
  selectSeekerEducationExperience();
  selectSeekerCertificate();
  selectResumePerfection();
});
</script>

<style lang="less" scoped>
.zaixianjianli {
  .text-style() {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #141c37;
    line-height: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .line {
      width: 1px;
      height: 12px;
      background: #d7d9e1;
      margin: 0 12px;
    }
  }

  .youhua-tag {
    width: 76px;
    height: 20px;
    background: rgba(255, 239, 210, 0.54);
    border-radius: 2px;
    position: absolute;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ec9b5c;
  }

  .tips {
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    margin-top: 36px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 12px;

    .big {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 16px;
      margin-right: 20px;
      b {
        color: #ff3939;
      }
    }
  }

  .action-text() {
    .action-text {
      position: absolute;
      right: 0;
      display: none;
      cursor: pointer;

      .edit {
        &.h1 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1890ff;

          &:hover {
            color: #6285ff !important;
          }
        }
        &.h2 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #727787;
          &:hover {
            color: #6285ff !important;
          }
        }
        &:last-child {
          margin-left: 26px;
        }
      }
    }
  }
  .line {
    height: 1px;
    background: #d7d9e1;
    width: 100%;
  }

  .block {
    box-sizing: border-box;
    &::after {
      content: '';
      display: block;
      background-color: rgba(229, 229, 229, 1);
      width: 100%;
      margin: 0 auto;
      height: 1px;
    }
    &:hover {
      .block-sub__title .action-btn__box {
        display: block;
      }
    }
    .block-sub__title {
      font-size: 20px;
      font-family: AlibabaPuHuiTi_2_85_Bold;
      color: #141c37;

      display: flex;
      align-items: center;
      position: relative;
      .line {
        display: block;
        position: absolute;
        left: -8px;
        width: 4px;
        height: 18px;
        background: #1890ff;
        border-radius: 2px;
        top: 6px;
      }

      .action-btn__box {
        float: right;
        margin-left: auto;
        display: none;
        .edit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          cursor: pointer;
          color: #1890ff;
          &:hover {
            color: #6285ff !important;
          }
          :deep(.svg-icon) {
            margin-right: 2px;
          }
        }
      }
    }
    .content {
      .ant-col {
        display: flex;
        margin-bottom: 32px;
        .label-title {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #727787;
          line-height: 14px;
          margin-right: 16px;
        }
        .label-content {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #141c37;
          line-height: 14px;
        }
      }
      p {
        color: #43495f;
        margin: 0;
        line-height: 28px;
      }
    }
    .project-name {
      font-size: 18px;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      color: #141c37;
      line-height: 18px;
    }
    .project-des {
      font-size: 16px;
      font-family: AlibabaPuHuiTi_2_65_Medium;
      color: #141c37;
      line-height: 16px;
    }
    .project-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #344767;
      line-height: 28px;
      p {
        margin: 0;
      }
    }
  }

  // 基本信息
  .block-jibenxinxi {
    padding: 0 30px;
    padding-top: 36px;
    margin-bottom: 16px;

    .block-sub__title {
      margin-bottom: 20px;
      position: relative;
      .youhua-tag {
        left: 99px;
        top: 7px;
      }
    }

    .content {
      &.bg {
        margin-bottom: 20px;
        background: #f5f6f7;
        border-radius: 4px;
        padding: 0 20px;
        padding-top: 20px;
      }
      .label-title {
        width: 84px;
        text-align: right;
      }
    }
    .basic-info {
      box-sizing: border-box;
      padding-bottom: 8px;
    }
  }

  // 求职期望
  .block-qiuzhiqiwang {
    padding: 0 34px;
    padding-top: 24px;
    margin-bottom: 16px;
    .block-sub__title {
      margin-bottom: 25px;
    }
    .qiwang {
      box-sizing: border-box;
      padding-bottom: 6px;
    }
  }

  // 个人优势
  .block-gerenyoushi {
    padding: 0 34px;
    padding-top: 24px;
    margin-bottom: 16px;
    .block-sub__title {
      margin-bottom: 25px;
      position: relative;
      .youhua-tag {
        left: 99px;
        top: 7px;
      }
    }
    .content {
      box-sizing: border-box;
      padding-bottom: 33px;
      &.bg {
        background-color: #f3f3f5;
        padding-right: 20px;
      }
    }
  }

  .sub-project-name {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    line-height: 16px;
    margin-bottom: 20px;
  }

  // 工作经历 & 教育经历
  .block-gongzuojingli,
  .block-jiaoyujingli {
    padding: 0 34px;
    padding-top: 24px;
    margin-bottom: 16px;
    min-height: 100px;

    .block-sub__title {
      margin-bottom: 27px;
      position: relative;
      .youhua-tag {
        left: 99px;
        top: 7px;
      }
    }
    .content {
      box-sizing: border-box;

      &:hover {
        .action-text {
          display: block !important;
        }
        .text {
          opacity: 0;
        }
      }
      &:last-child {
        padding-bottom: 33px;
        .project-text {
          margin-bottom: 0;
        }
      }
    }
    .project-name {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      justify-content: space-between;
      position: relative;
      > div {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 16px;
      }

      .text {
        color: #999999;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      .action-text();
    }
    .project-des {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-bottom: 16px;
    }
    .project-text {
      margin-bottom: 34px;
    }
    .line {
      margin-bottom: 40px;
    }

    .huibaoshangji {
      font-size: 16px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      margin-bottom: 16px;
      color: rgba(51, 51, 51, 0.85);
      span {
        color: rgba(0, 0, 0, 0.85);
      }
      & + .huibaoshangji {
        margin-bottom: 32px;
      }
    }
  }

  // 项目经历
  .block-xiangmujingyan {
    padding: 0 34px;
    padding-top: 24px;
    margin-bottom: 16px;
    min-height: 100px;
    .block-sub__title {
      margin-bottom: 32px;
      position: relative;
      .youhua-tag {
        left: 99px;
        top: 7px;
      }
    }

    .content {
      box-sizing: border-box;

      &:last-child {
        padding-bottom: 33px;
        // .project-text {
        //   margin-bottom: 0;
        // }
      }

      &:hover {
        .project-name .text {
          display: none;
        }
        .action-text {
          display: block;
        }
      }
    }

    .danrenjuese {
      font-size: 16px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      margin-bottom: 32px;
      color: rgba(51, 51, 51, 0.85);
      span {
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .xiangmulianjie {
      margin-bottom: 32px;
      .title-link {
        font-size: 16px;
        font-family: AlibabaPuHuiTi_2_65_Medium;
        color: #141c37;
        margin-bottom: 17px;
      }
      .link {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #43495f;
      }
    }
    .project-name {
      display: flex;
      margin-bottom: 24px;
      position: relative;
      justify-content: space-between;
      > div {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 16px;
      }
      .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      .action-text();
    }
    .project-des {
      margin-bottom: 17px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
    }
    .project-text {
      margin-bottom: 20px;
    }
    .line {
      margin-bottom: 40px;
    }
  }

  // 资格证书
  .block-zigezhengshu {
    padding: 0 34px;
    padding-top: 24px;
    margin-bottom: 24px;
    &.block {
      &::after {
        content: none;
      }
    }
    .block-sub__title {
      margin-bottom: 28px;
      position: relative;
      .youhua-tag {
        left: 99px;
        top: 7px;
      }
    }
    .content {
      box-sizing: border-box;
      padding-bottom: 40px;
      margin: -8px;
      :deep {
        .ant-tag {
          line-height: 38px;
          margin: 8px;
          border-color: #d0d2d7;
          background-color: #fff;
          border-radius: 2px;
          color: #141c37;
          position: relative;
          &:hover {
            .close {
              display: block;
            }
          }
          .close {
            position: absolute;
            right: -8px;
            top: -8px;
            display: block;
            width: 16px;
            height: 16px;
            background: #000000;
            border-radius: 50%;
            color: #fff;
            line-height: 1.15715;
            text-align: center;
            cursor: pointer;
            display: none;
          }
        }
      }
    }
  }

  // 能力指数
  .block-neng-li-zhi-shu {
    padding: 0 34px;
    padding-top: 24px;
    .block-sub__title {
      margin-bottom: 28px;
    }
  }

  :deep {
    .btn-box {
      text-align: center;
      .ant-form-item {
        margin-bottom: 32px;
      }
      .ant-btn-primary {
        background-color: #1890ff;
        color: #fff;
        border-color: #6285ff;
        margin-left: 24px;
      }
    }

    .ant-form-item-label > label {
      height: 40px;
    }

    .wrapper-textarea .ant-form-item-control-input-content {
      max-width: 1037px;
      position: relative;
      .count {
        bottom: 10px;
        right: 10px;
        position: absolute;
      }
    }
  }
}
</style>
